<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <el-form-item label="申请人" prop="applicanter">
                <el-input v-model="formData.applicanter" placeholder="请输入申请人" clearable
                          :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="客户名称" prop="company">
                <el-input v-model="formData.company" placeholder="请输入客户名称" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="起始时间" prop="issuedTime">
                <el-date-picker type="datetime" v-model="formData.issuedTime" format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择起始时间" clearable>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="发布原因" prop="reason">
                <el-input v-model="formData.reason" placeholder="请输入发布原因" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="版本" prop="version">
                <el-select v-model="formData.version" placeholder="请选择版本" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in versionOptions" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="MAC地址" prop="macAddress">
                <el-input v-model="formData.macAddress" placeholder="请输入MAC地址" clearable
                          :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <el-form-item label="申请部门" prop="department">
                <el-select v-model="formData.department" placeholder="请选择申请部门" clearable
                           :style="{width: '100%'}">
                  <el-option v-for="(item, index) in departmentOptions" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="申请类型" prop="type">
                <el-select v-model="formData.type" placeholder="请选择申请类型" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="截止时间" prop="expiryTime">
                <el-date-picker type="datetime" v-model="formData.expiryTime" format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择截止时间" clearable>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="申请描述" prop="description">
                <el-input v-model="formData.description" type="textarea" placeholder="请输入申请描述"
                          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="存废状态" prop="state" required>
                <el-switch v-model="formData.state" disabled></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";

export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        applicanter: undefined,
        company: undefined,
        issuedTime: null,
        reason: undefined,
        version: undefined,
        macAddress: undefined,
        department: undefined,
        type: undefined,
        expiryTime: null,
        description: undefined,
        state: false,
      },
      rules: {
        applicanter: [{
          required: true,
          message: '请输入申请人',
          trigger: 'blur'
        }],
        company: [{
          required: true,
          message: '请输入客户名称',
          trigger: 'blur'
        }],
        issuedTime: [{
          required: true,
          message: '请选择起始时间',
          trigger: 'change'
        }],
        reason: [{
          required: true,
          message: '请输入发布原因',
          trigger: 'blur'
        }],
        version: [{
          required: true,
          message: '请选择版本',
          trigger: 'change'
        }],
        macAddress: [],
        department: [{
          required: true,
          message: '请选择申请部门',
          trigger: 'change'
        }],
        type: [{
          required: true,
          message: '请选择申请类型',
          trigger: 'change'
        }],
        expiryTime: [],
        description: [],
      },
      versionOptions: [{
        "label": "评审工具",
        "value": 1
      }, {
        "label": "计价工具",
        "value": 2
      }, {
        "label": "党建工具",
        "value": 3
      }, {
        "label": "资产工具",
        "value": 4
      }],
      departmentOptions: [{
        "label": "市场部",
        "value": 1
      }, {
        "label": "实施部",
        "value": 2
      }, {
        "label": "开发部",
        "value": 3
      }],
      typeOptions: [{
        "label": "试用临时",
        "value": 1
      }, {
        "label": "正式长期",
        "value": 2
      }, {
        "label": "移机更换",
        "value": 3
      }, {
        "label": "演示环境",
        "value": 4
      }, {
        "label": "测试使用",
        "value": 5
      }, {
        "label": "开发使用",
        "value": 6
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        axios
            .post('api/license/addApplicantion',this.formData)
            .then((res) => {
              let _data=res.data;
              this.info = _data;
              console.log("success"+this.info);
              alert("提交成功");
            })
            .catch((err) => {
              console.log(err);
              alert("提交失败");
            });
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
